<template>
  <div class="wrap">
    <div class="block">
      <div class="gruid" v-for="(item, index) in lists" :key="index">
        <div class="count" :style="{ color: item.color }">
          <span>{{ item.count }}</span>
        </div>

        <div class="linebox">
          <div
            :style="{
              width: '12px',
              height: '12px',
              backgroundColor: item.color
            }"
          ></div>
          <div class="desc">
            <span>{{ item.desc }}</span>
          </div>
        </div>
      </div>
      <div class="borderRowLine"></div>
      <div class="borderColumnLine" style="left:136px"></div>
      <div class="borderColumnLine" style="left:274px"></div>
      <div class="borderColumnLine" style="left:416px"></div>
    </div>
  </div>
</template>

<script>
import { themeOption } from "@/components/echart/buildEChartOption";

export default {
  name: "DepartmentLists",
  props: {
    departmentLists: Array
  },
  data() {
    return {
      lists: []
    };
  },
  watch: {
    departmentLists: function(newVal) {
      let lists = newVal;
      let color = themeOption.color;

      this.lists = lists.map((item, index) => {
        return {
          count: item.number,
          desc: item.secondDepartment,
          color: color[index]
        };
      });
    }
  },
  methods: {},
  created() {},
  mounted() {
    // console.log('departmentLists', this.departmentLists);
  },
  destroyed() {}
};
</script>

<style scoped="scoped">
.wrap {
  position: absolute;
  top: 54px;
  left: 800px;
  z-index: 1;
}

.block {
  width: 560px;
  height: 280px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* justify-content: center;
  align-items: center; */
  position: relative;
}

.gruid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 140px;
}

.count {
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
  margin-bottom: 16px;
}

.linebox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.desc {
  font-size: 14px;
  font-family: SimHei;
  font-weight: 400;
  color: #2e2e2e;
  margin-left: 4px;
}

.borderRowLine {
  position: absolute;
  width: 560px;
  height: 2px;
  border: 4px solid #eeeeee;
  top: 136px;
  left: 0px;
}

.borderColumnLine {
  position: absolute;
  width: 2px;
  height: 280px;
  border: 4px solid #eeeeee;
  top: 0px;
}
</style>
